import React, { Component } from 'react'
import { Checkbox, Stepper } from 'antd-mobile'
import { FormattedMessage } from 'react-intl'
import { PriceItem } from './'
import { helper, config, myFetch } from '../utils'

export default class LimitOrStop extends Component {
	state = {
		check : this.props.defaultdefaultCon !== undefined ? this.props.defaultType : true,
		price: this.props.orderPrice,
    	flag: false,
    	rangePrice: 0,
	}
	changePrice = 0
	  componentWillReceiveProps(nextProps) {
	    if (nextProps.direction != this.props.direction ) {
	      this.setState({
	        flag: false
	      })
	    }
	  }
	 onChangeStepper = (e) => {
	    if (!e) {
	      e = 0
	    }
	    let len = 5
	    let num = 0
	    let digit = 0
	    if (this.props.ccy.includes('JPY')) {
	      len = 3
	    }
	    if (len == 5) {
	      num = helper.accDiv(e, 10000)
	      digit = 5
	    } else if (len == 3) {
	      num = helper.accDiv(e, 100)
	      digit = 3
	    }
	    if (this.state.flag) {
	      if (!this.changePrice) {
	         this.changePrice = this.props.orderPrice
	      }
	      this.setState({
	        price: Number(helper.accAdd(this.changePrice, num).toFixed(digit)),
	        rangePrice: this.changePrice,
	        flag: true
	      }, () => {
	      	this.changePrice = this.state.price
	        this.props.onTimesChange(this.state.price, e)
	      })
	    } else {
	      this.setState({
	        price: Number(helper.accAdd(this.props.orderPrice, num).toFixed(digit)),
	        rangePrice: this.props.orderPrice,
	        flag: true
	      }, () => {
	        this.changePrice = this.props.orderPrice
	        this.props.onTimesChange(this.state.price, e)
	      })
	    }
	  }
	 onRangePrice = (direction, type) => {
	    let result
	    if (direction == 0) {
	      if (type == 4) {
	        result = '≤'
	      } else if (type == 3) {
	        result = '≥'
	      }
	    } else if (direction == 1) {
	      if (type == 4) {
	        result = '≥'
	      } else if (type == 3) {
	        result = '≤'
	      }
	    }
	    return result
	 }
	 onValue = (type, direction) => {
	    let max = Infinity
	    let min = -Infinity
	    let arr = []
	    if (direction == 0) {
	      if (type == 4) {
	        max = 0
	      } else if (type == 3) {
	        min = 0
	      }
	    } else if (direction == 1) {
	      if (type == 4) {
	        min = 0
	      } else if (type == 3) {
	        max = 0
	      }
	    }
	    arr.push(max, min)
	    //console.log(arr, 'arr')
	    return arr
	 }
	render() {
		const { orderPrice, direction, className, defaultCon } = this.props
		return (
			<div className={`rt-limit-stop ${className} ? ${className} : ''`}>
				<div className="-condirection-type">
					<div className={`-left -active -ratio`}>
						<Checkbox
						  checked={true}
						  disabled={true}
						/>
						<FormattedMessage id={`${defaultCon == 3 ? 'limit' : 'stop'}`}/>
					</div>
				</div>
				<div className={`rt-price-item`}>
		          <span className="-wrap-left">
		          	  <FormattedMessage id="price"/>
		          <span className="-price-range">
		           {this.onRangePrice(direction, defaultCon)}{this.props.orderPrice}
		          </span>
		        </span>
		        <div className="-wrap-price-right">
		          <Stepper
		            className="rt-order-stepper"
		            max={this.onValue(defaultCon, direction)[0]}
		            min={this.onValue(defaultCon, direction)[1]}
		            onChange={this.onChangeStepper}
		            value={this.state.flag ? this.state.price : this.props.orderPrice}
		            showNumber
		          />
		        </div>
		      </div>
			</div>
			)
	}
}